import React, {useState} from 'react'
import {connect} from "react-redux"
import './withdraw.css'

// antd-mobile
import {Icon, NavBar, WingBlank, InputItem, List, WhiteSpace} from "antd-mobile"

// constants
import constants from "../../utils/constants"

// icon
import DetailIcon from "../../res/images/web/shared/detail.png"
import DocIcon from "../../res/images/web/withdraw/doc.png"
import CardIcon from "../../res/images/web/withdraw/card.png"
import CustomButton from "../../shared-components/CustomButton/CustomBotton"

const WithdrawContainer = (props) => {

    // props
    const {history, userdetail: {Gold,},} = props
    // dispatch
    const {doWithdraw} = props

    const [withdraw, setWithdraw] = useState('')

    // functions
    const confirmWithdraw = () => {
        // 如果余额不足则不能提交
        // if (withdraw > Gold) {
        //     emitError('余额不足')
        //     return
        // }
        const uid = localStorage.getItem('userid')
        const a = Number(withdraw)
        doWithdraw({uid, a,})
    }

    const leftContent = (
        <>
            <Icon type='left' size='lg'/>
            <span className='go-back-layout-icon-title go-back-layout-icon-title-white'>我要提现</span>
        </>

    )

    const NavBarRightContent = (
        <div onClick={() => history.push('revenue')}>
            <span style={{opacity: '0.8', paddingRight: '3px'}}>收支明细</span>
            <img src={DetailIcon} alt=''/>
        </div>
    )

    const NavBarTemplate = (
        <NavBar
            leftContent={leftContent}
            onLeftClick={() => {history.goBack()}}
            style={{backgroundColor: `${constants.themeColor}`}}
            rightContent={NavBarRightContent}
        />
    )

    const coinTemplate = (
        <div className='wallet-coin-ctn'>
            <p className='wallet-coin'>
                {Gold}
            </p>
            <p className='wallet-coin-text wallet-coin-add'>
                可提现（税前）
            </p>
        </div>
    )

    const withdrawTemplate = (
        <div className='withdraw-input-ctn'>
            <p>提现金额</p>
            <div style={{borderBottom: '1px solid #F8F8F8', marginTop: '20px'}}>
                <List>
                    <InputItem
                        placeholder="0.00"
                        onChange={v => setWithdraw(v)}
                    />
                </List>
            </div>
        </div>
    )

    const infoTemplate = (
        <div className='flex-space-between-align-center'>
            <div
                onClick={() => history.push('account-info')}
                className='flex-space-around-align-center withdraw-card'
            >
                <div className='flex flex-align-center'>
                    <img src={CardIcon} alt='' style={{marginRight: '0.5rem'}}/>
                    <span>收款信息</span>
                </div>
                <Icon type='right' />
            </div>
            <div
                onClick={() => history.push('withdraw-rules')}
                className='flex-space-around-align-center withdraw-card'
            >
                <div className='flex flex-align-center'>
                    <img src={DocIcon} alt='' style={{marginRight: '0.5rem'}}/>
                    <span>提现说明</span>
                </div>
                <Icon type='right' />
            </div>
        </div>
    )

    const confirmTemplate = (
        <div className='withdraw-submit'>
            <CustomButton
                inline='true'
                onClick={confirmWithdraw}
                shadow='0px 6px 10px 0px rgba(250,114,104,0.4)'
            >
                确 认 提 取
            </CustomButton>
        </div>
    )

    return (
        <>
            {NavBarTemplate}
            {coinTemplate}
            <WingBlank>
                {withdrawTemplate}
                <WhiteSpace/>
                {infoTemplate}
                {confirmTemplate}
            </WingBlank>
        </>
    )
}

const mapStateToProps = ({user: {userdetail,},}) => ({
    userdetail,

})

const mapDispatchToProps = ({global: {globalError,}, user: {doWithdraw,},},) => ({
    emitError: (error) => globalError(error),
    doWithdraw: (payload) => doWithdraw(payload),
})
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(WithdrawContainer)
